<template>
  <van-nav-bar
  title="精选播单"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

    <div class="big-box" v-on:scroll="handleScroll">
      <div class="carousel">
        <div class="carousel-item">
          <img src="http://p1.music.126.net/4L--5jGuNNCdRxL10n_0-g==/19057835044326350.jpg?param=140y140">
          <p>“为什么受伤的总是我？”|爱的学习手册</p>
        </div>
          <div class="carousel-item">
            <img src="http://p1.music.126.net/2rux5LnJey75tm9Md-9D-Q==/2890616070443534.jpg?param=140y140">
            <p>“日式清新向｜超治愈的清新日语歌单</p>
          </div>
      </div>
    <div class="carousel">
      <div class="carousel-item">
          <img src="http://p1.music.126.net/3RANMlMM-udSsHyInyVbrQ==/528865105234307.jpg?param=140y140">
          <p>“助眠辑 | 自然音，伴灵动乐符萦绕耳畔</p>
      </div>
       <div class="carousel-item">
          <img src="http://p1.music.126.net/ACdcatIwH63UUaUKMOpzLQ==/109951168620062161.jpg?param=140y140">
          <p>“极致的爱意能融化冰雪</p>
      </div>
   </div>
   <div class="carousel">
        <div class="carousel-item">
          <img src="http://p1.music.126.net/4kfPsvxjCshmNujARzoRsA==/109951168599347892.jpg?param=140y140">
          <p>“全场焦点，击中你的心脏</p>
        </div>
          <div class="carousel-item">
            <img src="http://p1.music.126.net/xuyzd8MNMEUO3Nx6_GFsUw==/109951168564502313.jpg?param=140y140">
            <p>“自然之音/沉浸大自然 静谧与美好之中</p>
          </div>
      </div>
      <div class="carousel">
        <div class="carousel-item">
          <img src="http://p1.music.126.net/mUlmUzGS__KYfcJH6aekDg==/109951168625532022.jpg?param=140y140">
          <p>“甜醉微醺｜chill氛围 我们都是上瘾的囚犯</p>
        </div>
          <div class="carousel-item">
            <img src="../../images/p1.jpg">
            <p>“极致放空 找回自己</p>
          </div>
      </div>
  </div>


</template>

<script>
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
  methods: {
    handleScroll: function(event) {
      // 处理滚动事件
    }
  }
};
</script>

<style lang="less" scoped>
.big-box{
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: space-around;
 
}
.big-box img{
  width: 170px;
    height: 170px;
}
.big-box .carousel-item{
  width: 170px;
  height: 170px;
  margin-bottom: 50px;
}
.scrollable {
  overflow: scroll;
  height: 200px;
}
</style>
